<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题结构元素</title>
</head>
<body>
<!--独立的个体-->
<article>
    <!--标题-->
    <header>
        <h1>这是标题</h1>
        <p>创建时间：<time pubdate = "pabdate">2017/09/27</time></p>
    </header>
    <!--内容-->
    <p>
        <b>Article</b>是一个独立的区域，这里是主题内容
    </p>
    <!--内容分块 类似于list-->
    <section>
        <h2>读者评论</h2>
        <article>
            <header>
                <h3>读者：黄秋雨</h3>
                <p>
                    <time pubdate datetime="2014/0927T21:00">2小时前</time>
                </p>
            </header>
            <p>
                文章很好
            </p>
        </article>

        <article>
            <header>
                <h3>读者：黄秋雨</h3>
                <p>
                    <time pubdate datetime="2014/0927T21:00">2小时前</time>
                </p>
            </header>
            <p>
                文章很好
            </p>
        </article>
    </section>
    <!--特点是：有标题 内容等结构 可以生成内容结构-->
    <section>
        <h1>这是一个section</h1>
        <p>
            这里是内容区域
        </p>
    </section>

    <!--页脚-->
    <footer>
        <p><small>麦子学院版权所有</small></p>
    </footer>
</article>
<br/>
<div>
  -----------下面是关于产品的文章------------------------
</div>
<article>
    <header>
        <h1>产品</h1>
    </header>
    <p>详细的产品列表</p>
    <section>
        <h2>产品A</h2>
        <p>产品A的介绍</p>
    </section>
    <section>
        <h2>产品B</h2>
        <p>产品B的介绍</p>
    </section>
    <section>
        <h2>产品C</h2>
        <p>产品C的介绍</p>
    </section>
    <footer>
        <p><small>麦子学院版权所有</small></p>
    </footer>
</article>
<div>
    -----------下面是关于产品的文章------------------------
</div>
<section>
    <h1>产品</h1>
    <p>产品的种类列表</p>
    <article>
        <h2>产品A</h2>
        <p>产品A的介绍</p>
    </article>
    <article>
        <h2>产品B</h2>
        <p>产品B的介绍</p>
    </article>
</section>
<p>
    -----------aside 主要内容的附属信息----------------
</p>

<header>
    <h1>国庆节去看大熊猫</h1>
</header>
<article>
    <h2>看熊猫去大熊猫基地</h2>
    <p2>那里有这么多熊猫，怎么去呢？</p2>
    <aside>
        <!--类似附件信息-->
        <h3>名词解释:</h3>
        <dl>
            <dt>大熊猫基地</dt>
            <dd>大熊猫基地在四川</dd>
        </dl>
    </aside>
</article>
<aside>

</aside>
</body>
</html>